/* eslint-disable vue/require-v-for-key */
<template>
  <div class="search">
    <div class="header">
      <van-nav-bar>
        <template #left>
          <van-icon name="arrow-left" color="#fff" size="30px" @click="back()"/>
        </template>
        <template #title>
          <van-search placeholder="请输入搜索关键词" shape="round" v-model="keyword" @blur.enter="show()"/>
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <div v-if="list.length === 0">
        <dl class="hot-search">
          <dt>热搜：</dt>
         <!--  eslint-disable-next-line -->
          <dd v-for="key in hot" @click="hotshow(key)">
            {{key}}
          </dd>
        </dl>
      </div>
      <div class="list">
        <van-card
          v-for="info in list"
          :key="info.id"
          :price="info.malMobilePrice"
          :desc="info.commentsNumber +'条评价'"
          :title="info.name1"
          :thumb="info.masterImg"
          @click="toDetail(info.id)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { findHot } from '@/api/search'
export default {
  name: 'search',
  data () {
    return {
      hot: [],
      keyword: '',
      list: []
    }
  },
  mounted () {
  },
  created () {
    findHot()
      .then(res => {
        this.hot = res.keywords
      })
      .catch()
  },
  methods: {
    back () {
      this.$router.back()
    },
    show () {
      console.log(this.keyword)
      const keyword = encodeURIComponent(this.keyword)
      this.$http.get('https://m.lemall.com/api/search.html?pageIndex=1&keyword=' + keyword)
        .then(res => {
          this.list = res.producListVOs
        })
        .catch(err => {
          console.log(err)
        })
    },
    hotshow (key) {
      console.log(key)
      const keyword = encodeURIComponent(key)
      this.$http.get('https://m.lemall.com/api/search.html?pageIndex=1&keyword=' + keyword)
        .then(res => {
          this.list = res.producListVOs
        })
        .catch(err => {
          console.log(err)
        })
    },
    toDetail (id) {
      this.$router.push('/detail?id=' + id)
    }
  }
}
</script>

<style lang="scss" scoped>
.search{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header{
    height: 46px;
    .van-nav-bar{
      color: #000;
      background: linear-gradient(
90deg, #dd9b4c, #ffd787);
    }
    .close{
      font-size: 16px;
    }
    .van-search{
      padding: 0;
      background: none;
    }
  }
  .main{
    flex: 1;
    overflow: auto;
    .hot-search{
      display: flex;
      padding-bottom: 10px;
      border-bottom: 3px solid #d5d5d5;
      dt{
        height: 20px;
        line-height: 30px;
      }
      dd{
        height: 20px;
        padding: 5px;
        background: #f2f2f2;
        border-radius: 15px;
      }
    }
    .van-card{
      height: 140px;
      margin-bottom:3px;
    }
    /deep/ .van-card__thumb{
      width: 100px;
      height: 100px;
    }
    /deep/ .van-image{
      img{
        width: 95px;
        height: 95px;
      }
    }
  }
}
</style>
